// 步骤属性交互逻辑

document.addEventListener('DOMContentLoaded', function() {
    // Bootstrap 5会自动初始化collapse组件，不需要手动初始化
    
    // 处理属性标题点击事件
    document.querySelectorAll('.property-header').forEach(function(header) {
        // 不需要手动添加点击事件，Bootstrap会处理点击事件
        // 但我们需要处理图标的切换
        const targetId = header.getAttribute('data-bs-target');
        const targetCollapse = document.querySelector(targetId);
        
        // 监听collapse事件来切换图标
        targetCollapse.addEventListener('show.bs.collapse', function() {
            const icon = header.querySelector('i');
            icon.classList.remove('bi-chevron-up');
            icon.classList.add('bi-chevron-down');
        });
        
        targetCollapse.addEventListener('hide.bs.collapse', function() {
            const icon = header.querySelector('i');
            icon.classList.remove('bi-chevron-down');
            icon.classList.add('bi-chevron-up');
        });
        
        // 初始化图标状态
        const icon = header.querySelector('i');
        if (targetCollapse.classList.contains('show')) {
            icon.classList.remove('bi-chevron-up');
            icon.classList.add('bi-chevron-down');
        } else {
            icon.classList.remove('bi-chevron-down');
            icon.classList.add('bi-chevron-up');
        }
    });
    
    // 处理变量选择器点击事件
    document.querySelectorAll('.property-value input[placeholder="点击使用变量"]').forEach(function(input) {
        input.addEventListener('click', function() {
            // 这里可以实现变量选择器的弹出逻辑
            console.log('打开变量选择器');
        });
    });
    
    // 处理三点按钮点击事件
    document.querySelectorAll('.property-value button').forEach(function(button) {
        button.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡
            console.log('打开更多选项');
            // 这里可以实现更多选项的弹出逻辑
        });
    });
});